import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Table, Button, Card } from 'antd';
import styles from './AuditOrder.less';
import globalConstant from '../../utils/globalConstant';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';


@connect(({ packageOrder, loading }) => ({
  packageOrder,
  loading: loading.models.packageOrder,
}))
export default class RenewOrder extends PureComponent {
  state = {
    showAuditOrderDetails: false,
    id: undefined,
  }
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'packageOrder/fetch',
      payload: {
        pageNum: globalConstant.paging.defaultPageNum,
        pageSize: globalConstant.paging.defaultPageSize,
        checkStatus: 'CHECK_STATUS_UNCHECKED ',
        orderType: 'NETWORK_ORDER_TYPE_CONTINUE',
      },
    });
  }
  handleStandardTableChange = (pagination) => {
    const { dispatch } = this.props;
    const params = {
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
      checkStatus: 'CHECK_STATUS_UNCHECKED ',
      orderType: 'NETWORK_ORDER_TYPE_CONTINUE',
    };
    this.setState({
      pageNum: params.pageNum,
      pageSize: params.pageSize,
      checkStatus: 'CHECK_STATUS_UNCHECKED ',
      orderType: 'NETWORK_ORDER_TYPE_CONTINUE',
    });
    dispatch({
      type: 'packages/getPackagePage',
      payload: params,
    });
  }
  handleMenuClick = (value) => {
    this.props.dispatch(routerRedux.push(`/account/reneworderdetails?id=${value.id}`));
  }
  handleAddBusinessModalCancel =() => {
    this.setState({
      showAuditOrderDetails: false,
    });
  }
  render() {
    const columns = [
      {
        title: '用户名',
        dataIndex: 'userName',
        width: '10%',
      },
      {
        title: '套餐名',
        dataIndex: 'packagesName',
        width: '30%',
      },
      {
        title: '金额(元)',
        dataIndex: 'orderPrice',
        width: '15%',
      },
      {
        title: '支付状态',
        dataIndex: 'payStatus',
        width: '10%',
      },
      {
        title: '审核状态',
        dataIndex: 'checkStatusDes',
        width: '10%',
      },
      {
        title: '续费时长(月)',
        dataIndex: 'packagesDuration',
        width: '10%',
      },
      {
        title: '操作',
        key: 'key',
        render: (text) => {
          return (
            <Button style={{ width: 100 }} type="primary" onClick={() => this.handleMenuClick(text)}>
              点击进入
            </Button>
          );
        },
      },
    ];
    const { loading, packageOrder: { packageOrderList } } = this.props;
    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      total: packageOrderList && packageOrderList.totals,
      showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`,
    };
    console.log(this.props);
    return (
      <PageHeaderLayout title="用户管理">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <Table
              bordered
              rowKey={record => record.id}
              loading={loading}
              dataSource={packageOrderList && packageOrderList.items}
              columns={columns}
              pagination={paginationProps}
              onChange={this.handleStandardTableChange}
            />
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}
